<template>
	<view class="content_hydlfive">
		<view class="content_hydlfive_title">{{$t('运输工具')}}</view>
		<view class="hydlfive_block">
			<view :class="indexID==0?'content_hydlfive_block':'content_hydlfive_block_active'" @click="handeleItem(0)">
				{{$t('汽运')}}</view>
			<view :class="indexID==1?'content_hydlfive_block':'content_hydlfive_block_active'" @click="handeleItem(1)">
				{{$t('火车')}}</view>
			<view :class="indexID==2?'content_hydlfive_block':'content_hydlfive_block_active'" @click="handeleItem(2)">
				{{$t('海运')}}</view>
		</view>
		<view :class="indexID==3?'content_hydlfive_block_1':'content_hydlfive_block_1_active'" @click="handeleItem(3)">
			{{$t('空运')}}</view>
		<view class="hydlfive_overflow">
			<scroll-view class="scroll-view_H" scroll-x="true" v-if="list.length>0">
				<view @click="handeleChange(item)"  class="scroll-view-item_H" v-for="(item,index) in list" :key="index">
					<image class="imgs" :src="IMAGE_URL+item.logo[0]" mode="heightFix"></image>
					<view class="imgs_title">{{lang=='zh'?item.name:item.name_ru}}</view>
					<view class="imgs_brand">{{lang=='zh'?item.category.name:item.category.name_ru}}</view>
				</view>
			</scroll-view>
			<view class="five-none" v-else>{{$t('暂无信息')}}</view>
		</view>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	export default {
		props: ['message','lang'],
		data() {
			return {
				IMAGE_URL,
				HTTP_IMG_UTL,
				indexID: 6,
				list: this.message
			}
		},
		onLoad() {
			console.log('this.message:',this.message);
		},
		methods: {
			handeleChange(item){
				console.log('item:',item);
			},
			handeleItem(index) {
				this.indexID = index
				if(index==0){ //汽运
					this.list = this.message.filter(item => item.mode === "汽运");
				}else if(index==1){ //火车
					this.list = this.message.filter(item => item.mode === "火车");
				}else if(index==2){//海运
					this.list = this.message.filter(item => item.mode === "海运");
				}else if(index==3){ //空运
					this.list = this.message.filter(item => item.mode === "空运");
				}
			}
		}
	}
</script>

<style scoped>
	.five-none{
		font-size: 24rpx;
		color: #999999;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.imgs_brand{
		width: 285rpx;
		margin: 0 auto;
		height: 45rpx;
		background: #0BC471;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 45rpx;
		margin-top: 4rpx;
		 text-overflow: ellipsis;
		    overflow: hidden;
		    word-break: break-all;
		    white-space: nowrap;
	}
	.imgs_title{
		width: 264rpx;
		height: 48rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #3D3D3D;
		margin-top: 13rpx;
		margin-left: 16rpx;
	}
	.imgs{
		width: 319rpx;
		height: 207rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	.scroll-view-item_H {
		display: inline-block;
		min-width: 319rpx;
		height: 340rpx;
		font-size: 36rpx;
		margin-right: 12rpx;
		border-radius: 16rpx;
		border: 2rpx solid #F0F0F0;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 340rpx;
		margin-top: 52rpx;
	}

	.hydlfive_overflow {
		height: 340rpx;
		width: 100%;

	}

	.hydlfive_block {
		width: 100%;
		height: 68rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content_hydlfive_block_1 {
		margin-top: 17rpx;
		width: 100%;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #0BC471;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #0BC471;
	}

	.content_hydlfive_block_1_active {
		margin-top: 17rpx;
		width: 100%;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #F0F0F0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #3D3D3D;
	}

	.content_hydlfive_block {
		width: 200rpx;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #0BC471;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #0BC471;
	}

	.content_hydlfive_block_active {
		width: 200rpx;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #F0F0F0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #3D3D3D;
	}

	.content_hydlfive_title {
		font-weight: 500;
		font-size: 30rpx;
		color: #3D3D3D;
		margin-bottom: 24rpx;
	}

	.content_hydlfive {
		width: 750rpx;
		min-height: 648rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 12rpx;
		padding: 34rpx 60rpx 24rpx 60rpx;
	}
</style>